<template>
  <el-select
    v-model="id"
    :placeholder="getPlaceholder()"
    :="$attrs"
    @change="handleChange"
  >
    <el-option
      v-for="item in options"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script setup>
const props = defineProps({
  placeholder: {
    type: String,
    default: ''
  },
  label: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['change'])

const id = defineModel({
  type: String,
  default: ''
})
// const optionName = defineModel('name', {
//   type: String,
//   default: ''
// })
// const optionNameEn = defineModel('nameEn', {
//   type: String,
//   default: ''
// })
const productType = defineModel('productType', {
  type: String,
  default: ''
})
const options = defineModel('list', {
  type: Array,
  default: () => []
})

watch(
  [() => id.value, () => options.value],
  nv => {
    const obj = options.value.find(item => item.id === nv[0])
    // optionName.value = obj?.name
    // optionNameEn.value = obj?.nameEn
    productType.value = obj?.productType
  },
  {
    deep: true
  }
)

onMounted(() => {
  getOptions()
})

// 查询下拉列表
const getOptions = () => {
  g_api.travelAgency.apiRoutetypeDropList().then(({ code, data }) => {
    if (code === '200' && data) {
      options.value = data
    }
  })
}

const handleChange = data => {
  emit(
    'change',
    options.value.find(item => item.id === data)
  )
}

const getPlaceholder = _ => {
  return (
    props.placeholder ||
    g_rules.zhAndEnShowMsg(g_t('public.pleaseSelect'), props.label)
  )
}
</script>

<style scoped lang="scss"></style>
